<template>
  <basePage :show-tabbar="false" :page-params="pageParams">
    <view class="list-bg">
      <view class="pop-title">
        <view class="title">订单备注</view>
        <view
          class="close"
          @click="closePopFn"
        >
          <image
            class="close-icon"
            src="/static/image/close.png"
          />
        </view>
      </view>
      <view class="pop-content">
        <textarea v-model="newRemarks" placeholder="输入订单备注内容" placeholder-class="place" />
        <view class="button" @click="confirmFn">确定</view>
      </view>
    </view>
  </basePage>
</template>

<script>
import basePage from '@/components/base-page';
export default {
  components: {
    basePage
  },
  props: {
    orderInfo: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      title: 'Index',
      pageParams: {
        // state: 'ERROR',
        emptyTitle: '信号可能跑到外星球了哦～',
        errorTitle: '请求失败',
        showButton: true
      },
      newRemarks: this.orderInfo.orderRemark
    }
  },
  computed: {
    curOrderInfo() {
      return this.orderInfo
    }
  },
  onLoad(option) {

  },
  methods: {
    confirmFn() {
      this.curOrderInfo.orderRemark = this.newRemarks
      this.$emit('update:orderInfo', this.curOrderInfo)
      this.$emit('closePopFn')
    },
    closePopFn() {
      this.$emit('closePopFn')
    },
  }
}
</script>

<style scoped lang="scss">
@import "../static/scss/index";
.list-bg{
  height: 1122rpx;
  .pop-content{
    padding: 46rpx 32rpx;
    box-sizing: border-box;
    .button {
      width: 624rpx;
      height: 64rpx;
      border-radius: 8rpx;
      background: linear-gradient(128.8deg, rgba(255,121,95,1) 0%, rgba(238,61,26,1) 100%);
      margin: 0 auto;
      margin-top: 100rpx;
      margin-bottom: 60rpx;
      color: #FFFFFF;
      font-size: 28rpx;
      font-weight: 400;
      display: flex;
      justify-content: center;
      align-items: center;
      align-content: center;
    }
    textarea {
      background: #F9F9F9 !important;
      border: 1rpx solid #E2E2E2 !important;
      height: 766rpx;
      width: 100%;
      padding: 24rpx;
      box-sizing: border-box;
    }
    /deep/.place {
      color: #999999 !important;
      font-size: 28rpx;
      font-weight: 400;
    }
  }
}
</style>
